<template>
	<view class="cc-multi-picker" :style="{
		'--light-color': $theme.lightColor
	}">
		<picker
			:value="valueIndexControl" 
			:range="rangeList" 
			:range-key="showKey" 
			mode="multiSelector"
			@change="bindPickerChange"
			@columnchange="columnChange"
			:disabled="disabled"
		>
			<view class="mm-picker__content">
				<view :class="['mm-picker__text', disabled ? 'mm-picker__placeholder' : '']" v-if="showText">{{showText}}</view>
				<view class="mm-picker__placeholder" v-else>{{placeholder}}</view>
				<!-- #ifdef APP-PLUS -->
				<w-icon top="-4" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<w-icon top="8" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<w-icon top="0" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
				<!-- #endif -->
			</view>
		</picker>
	</view>
</template>

<script>
	/**
	 * 多列picker双向绑定封装
	 */
	import Emitter from '../../libs/util/emitter.js';
	export default {
		name: 'w-multi-picker',
		mixins: [Emitter],
		props: {
			// v-model Array＜String | Number＞
			value: {
				type: Array,
				default: () => []
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			// 选择列表 二维 Array＜Object＞
			list: {
				type: Array,
				default: () => []
			},
			showKey: {
				type: String,
				default: 'label'
			},
			valueKey: {
				type: String,
				default: 'value'
			},
			childrenKey: {
				type: String,
				default: 'children'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			// 根据value获取value所在的数组坐标
			valueIndex() {
				if (this.value.length == 0) return [];
				let result = [];
				this.list.some((item, index) => {
					if (item[this.valueKey] == this.value[0]) {
						result.push(index);
						item[this.childrenKey].some((e, i) => {
							if (e[this.valueKey] == this.value[1]) {
								result.push(i);
								return true;
							}
						})
						return true;
					}
				})
				return result;
			},
			// 选中后显示的文字
			showText() {
				if (this.valueIndex.length == 0) return false;
				let secondShow = this.list[this.valueIndex[0]][this.childrenKey][this.valueIndex[1]][this.showKey];
				return `${this.list[this.valueIndex[0]][this.showKey]}，${secondShow}`;
			}
		},
		data() {
			return {
				index: 0,
				rangeList: [],
				valueIndexControl: [] // 控制picker选中的下标组
			}
		},
		watch: {
			list: {
				handler(newValue) {
					// 获取第二列数组
					let filterList = newValue.filter(item => item[this.valueKey] == this.value[0]);
					let secondList = [];
					if (filterList.length > 0) { // 如果找到匹配值
						secondList = filterList[0][this.childrenKey];
					} else { // 没有则默认第一项的children
						secondList = newValue[0][this.childrenKey];
					}
					this.rangeList = [newValue, secondList];
				},
				immediate: true
			},
			valueIndex: {
				handler(newValue) {
					if (newValue.length > 0) {
						this.valueIndexControl = newValue;
					} else {
						this.valueIndexControl = [0, 0];
					}
				},
				immediate: true
			}
		},
		methods: {
			// 选中回调
			bindPickerChange(e) {
				let valueIndex = e.detail.value;
				let values = [
					this.list[valueIndex[0]][this.valueKey],
					this.list[valueIndex[0]][this.childrenKey][valueIndex[1]][this.valueKey]
				];
				this.$emit('input', values);
				this.$emit('change', values);
				this.$nextTick(() => {
					this.dispatch('w-form-item', 'on-form-change', values);
				});
			},
			// 列值改变
			columnChange(e) {
				if (e.detail.column == 0) { // 如果滚动第一列，则动态更改第二列
					// 获取第二列数组
					let secondList = this.list[e.detail.value][this.childrenKey];
					this.$set(this.rangeList, 1, secondList);
					// 还原第二列位置（只还原手机端，微信开发者工具会出现数据错乱）
					// #ifdef APP-VUE
					this.$set(this.valueIndexControl, 0, e.detail.value);
					this.$set(this.valueIndexControl, 1, 0);
					// #endif
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cc-multi-picker {
		margin: 0;
		width: 100%;
		.mm-picker__content {
			display: flex;
			text-align: right;
			.mm-picker__placeholder {
				color: var(--light-color);
				flex: 1;
			}
			.mm-picker__text {
				flex: 1;
				width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-left: 30rpx;
			}
		}
	}
</style>
